﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;
        }
    </style>
</head>
<body>

<script src="../js/three.js"></script>
<script src="../js/dat.gui.js"></script>

<script>

    var camera, scene, renderer;
    var mesh;
	var texture;

    init();
    animate();

    function init() {

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        //
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 400;
        scene = new THREE.Scene();


        var geometry = new THREE.PlaneGeometry( 500, 300, 1, 1 );

		
        texture = THREE.ImageUtils.loadTexture("textures/a.jpg",null,function(t)
        {
        });

        var material = new THREE.MeshBasicMaterial({map:texture});
        var mesh = new THREE.Mesh( geometry,material );
        mesh.name="ccc"
        scene.add( mesh );
        console.log(scene.getObjectByName('ccc'))

        //
        window.addEventListener( 'resize', onWindowResize, false );
		createUI();
    }

	
	var para;
	function createUI()
	{
		var parameter = function() {
			this.repeat = 1;
			this.wrap  = 1;
		};
	
		para = new parameter();
		var gui = new dat.GUI();
		gui.add(para,"repeat",1,5).name("纹理重复");
		gui.add(para,"wrap",1,3).name("纹理环绕").step(1);
	}
			
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {
		change();
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }
	
	function change()
	{
		texture.repeat.x = texture.repeat.y= para.repeat;
		if(para.wrap == 1)
		{
			texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
		}else if(para.wrap == 2)
		{
			texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
		}else if(para.wrap == 3)
		{
			texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
		}
		texture.needsUpdate = true;
	}

</script>

</body>
</html>
